<template>
    <div class="map-outbox" style="width: 1024px;height: 600px;">
      <!--地图容器-->
      <div id="my-container" class="map"></div>
      <!--控制条-->
      <el-row style="top: 5px;" :gutter="20">
        <el-col :span="2">
          <el-button v-if="!isPlaying" type="primary" @click="start()" icon="el-icon-video-play"></el-button>
          <el-button v-if="isPlaying" type="primary" icon="el-icon-video-pause" @click="pause()"></el-button>
        </el-col>
        <el-col :span="19">
          <el-slider v-model="sliderVal" @input="changeValue()"></el-slider>
        </el-col>
        <el-col :span="3">
          <el-select v-model="value" placeholder="请选择" @change="setSpeed()">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
  </template>
<script>
// import AMap from 'AMap'
import AMapUI from 'AMapUI'
export default {
  data() {
    return {
      isPlaying: false,
      pathSimplifierIns: {},
      sliderVal: 0,
      navg: {},
      value: 1, //倍速
      speed: 100, //速度
      options: [{
          value: 1,
          label: "倍速1"
        },
        {
          value: 2,
          label: "倍速2"
        },
        {
          value: 3,
          label: "倍速3"
        },
        {
          value: 4,
          label: "倍速4"
        },

      ],

    };
  },
  //渲染前
  created: function() {

  },
  beforeDestroy: function() {
    document.onkeydown = function(e) {
        console.log(e);
    }
    
  },
  props: ["dialogVisible", "form", "dialogTitle"],
  methods: {
    dialogClose: function() {
      this.$emit("dialogClose", false);
    },
    initMap: function() {
      var $this = this;
      var map = new window.AMap.Map('my-container', {
        center: [116.397428, 39.90923], // [纬度，经度]
        resizeEnable: true,
        zoom: 15,
      });
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
        console.log($);
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！');
          return;
        }
        //创建一个巡航轨迹路线
        $this.pathSimplifierIns = new PathSimplifier({
          zIndex: 100, //地图层级，
          map: map, //所属的地图实例
          //巡航路线轨迹列表
          getPath: function(pathData, pathIndex) {
            console.log(pathIndex);
            return pathData.path;
          },
          //hover每一个轨迹点，展示内容
          getHoverTitle: function(pathData, pathIndex, pointIndex) {
            console.log(pathIndex);

            if (pointIndex >= 0) {
              return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
            }
            return pathData.name + '，点数量' + pathData.path.length;
          },
          //自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档
        //   renderOptions: {},
          //绘制路线节点
          renderOptions: {
            renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
          }
        });
        //设置数据
        $this.pathSimplifierIns.setData([{
          name: '路线0',
          path: [
            [116.478935, 39.997761],
            [116.478939, 39.997825],
            [116.478912, 39.998549],
            [116.478912, 39.998549],
            [116.478998, 39.998555],
            [116.478998, 39.998555],
            [116.479282, 39.99856],
            [116.479658, 39.998528],
            [116.480151, 39.998453],
            [116.480784, 39.998302],
            [116.480784, 39.998302],
            [116.481149, 39.998184],
            [116.481573, 39.997997],
            [116.481863, 39.997846],
            [116.482072, 39.997718],
            [116.482362, 39.997718],
            [116.483633, 39.998935],
            [116.48367, 39.998968],
            [116.484648, 39.999861]
          ]
        }]);
        //对第一条线路（即索引 0）创建一个巡航器
        $this.navg = $this.pathSimplifierIns.createPathNavigator(0, {
          loop: false, //循环播放
          speed: $this.speed, //巡航速度，单位千米/小时
          pathNavigatorStyle: {
            width: 20,
            height: 30,
            //使用图片
            content: PathSimplifier.Render.Canvas.getImageContent(
              "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", onload, onerror),
            // strokeStyle: null,
            // fillStyle: null,
            // //经过路径的样式
            // pathLinePassedStyle: {
            //     lineWidth: 5,
            //     strokeStyle: '#FFDC04',
            // }
          }
        });
        $this.navg.on("move", function() {
          let idx = this.getCursor().idx; //走到了第几个点
          let tail = this.getCursor().tail; //至下一个节点的比例位置
          let totalIdx = idx + tail

          // 进度条实时展示tail
          $this.sliderVal = (totalIdx / $this.navg.getPathEndIdx()).toFixed(2) * 100;
        });

      });

    },
    start: function() {
      // stop：停止状态，start之前或者stop之后处于该状态
      // moving：巡航状态，start或者resume之后处于该状态
      // pause：暂停状态，pause之后处于该状态
      this.isPlaying = true;
      if (this.navg.isCursorAtPathEnd()) {
        this.navg.start();
        return
      }
      if (this.navg.getNaviStatus() == "pause") {
        this.navg.resume();
      } else if (this.navg.getNaviStatus() == "stop") {
        this.navg.start();
      }
    },
    pause: function() {
      if (this.navg.getNaviStatus() == "moving") {
        this.navg.pause();
        this.isPlaying = false;
      }
    },
    setSpeed: function() {
      this.navg.setSpeed(this.speed * this.value);
    },
    getCheckDate: function(t) {
      //console.log(t);
      if (t.length >= 2) {
        this.checkDate.begintime = t[0];
        this.checkDate.endtime = t[1];
      }
    },
    changeValue: function() {
      // let newVal = typeof(newVal) === 'number' ? val : this.sliderVal
      let num = parseInt((this.sliderVal / 100) * this.navg.getPathEndIdx());
      let decimal = String((this.sliderVal / 100) * this.navg.getPathEndIdx()).split('.')[1] || 0
      this.navg.moveToPoint(num, Number('0.' + decimal));
      this.pathSimplifierIns.renderLater();
      if (num == this.navg.getPathEndIdx()) {
        this.isPlaying = false;
      }
    },
  },
  //渲染后
  mounted() {
    var that=this;
    setTimeout(()=>{
        that.initMap();
    },300)
  }
};
</script>
<style scoped>
  .map {
    height: 400px;
    width: 1024px;
  }


  .map-control {}
</style>
